<template>
  <div class="v2-header" :style="{height:h}">
    <div class="v2-left">
      <slot name="left"></slot>
    </div>
    <div class="v2-center">
      <slot ></slot>
    </div>
    <div class="v2-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "v2-header",
  props:{
    height:{
      type: Number ,
      default: 60
    }
  },
  computed:{
    h(){
      if(this.height > 80){
        return "60px" ;
      }else if(this.height < 30 ){
        return "40px"
      }else{
        return this.height+"px"
      }
    }
  },
  data(){
    return {

    }
  }
}
</script>

<style scoped>
  .v2-header{
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    box-shadow: 0 0px 5px #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 14px;
  }
  .v2-header>div{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .v2-header>.v2-center{
    flex: 1;
  }
</style>
